﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="刘亚彬">
		<title>演讲抽签</title>
		<style>
			body{
				margin: 0;padding: 0; cursor: pointer;
				width: 100vw; height: 100vh;
				display: flex; overflow: hidden;
				align-items: center; justify-content: center;
			}
			h1{
				text-align: center;
				width: 50px;height: 50px;
				font-size: 40px;
				line-height: 50px;
			}
			button{
				padding: 15px; box-sizing: border-box;
				font-size: 30px;
				width: 200px;
				position: fixed;
				top: 50px;
				left: calc(50vw - 100px);
			}
			.move{animation: big 1s ease-out forwards infinite;}
			.show{animation: small 1s ease-out forwards ;}
			.alpha{animation: alpha 2s ease-out forwards ;}
			@keyframes small{
				from{transform: scale(0.01);opacity: 0;}
				to{transform: scale(2);opacity: 1;}
			}
			@keyframes alpha{
				from{opacity: 0;}
				to{opacity: 1;}
			}
			@keyframes big{
				from{
					width: 50px;height: 50px;
					font-size: 40px;
					line-height: 50px;
					opacity: 1;
				}
				to{
					width: 650px;height: 650px;
					font-size: 640px;
					line-height: 650px;
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<button id="btn">班主任保佑别抽到我</button>
		<h1 id="h1">开始</h1>
	</body>
	<script type="text/javascript">
        var list = ['曹庆辉','柴西雷','陈俭龙','董新原','杜晨潞','耿伦','季兴乐','金宇恒','孔慧博','雷乃贞','李靖','李鹏','廖玉良','刘宏凯','刘孟龙','刘清杰','刘苏凯','刘相','陆文洁','马奔','闵俊涛','宋蕾','王华雷','王宇航',"项高阳","项路勤",'谢勇华','杨世豪','袁俊宇','张佳敏','张江明','张津瑞','张滩滩','赵江涛','周志博','朱汉卿',"邓撼","周明榆","曹金州","郭孟豪","赵青瀚","李杰建","王亚龙"];

		// alert(list.length)
		var btn = document.getElementById("btn")
		var h1 = document.getElementById("h1")
		var count = 0
		var timer 
		var index
		btn.onclick = function(){
			count = 3
			h1.innerHTML = count
			h1.className = 'move'
			timer = setInterval(move,1000)
			btn.style.display = 'none'
		}
		function move(){
			count--
            h1.innerHTML = count
			if(count == -1){
				h1.className = 'show'
				clearInterval(timer)
				index = Math.floor(Math.random()*list.length)
				h1.innerHTML = list[index]
				btn.style.display = 'block'
				btn.className = 'alpha'
				btn.innerHTML = '&nbsp;换个姿势&nbsp; 再抽一次'
			}
		}
		
	</script>
</html>
